<template>
	<view class="main" :style="{ top: top, left:left, right: right }" @click.stop="membersInfo">
		<u-avatar-group class="pic" :urls="visibleUsers" key-name="iconPath" size="30" gap="0.4"></u-avatar-group>
	</view>
</template>

<script>
	export default {
		name:"avatarGroup",
		props: {
		maxVisible: {
				type: Number,
				default: 5
			},
			// 头像重叠距离(rpx)，值越小重叠越多
			overlapDistance: {
				type: Number,
				default: 30
			},
			// 头像尺寸(rpx)
			avatarSize: {
				type: Number,
				default: 60
			},
			// 始终显示数量，即使未超过maxVisible
			alwaysShowCount: {
				type: Boolean,
				default: false
			},
			top: {
				type: String,
				default: 'auto'
			},
			right: {
				type: String,
				default: 'auto'
			},
			left:{
				type:String,
				default:"auto"
			}
		},
		data() {
			return {
				
			};
		},
		computed: {
			storeData() {
				return this.$store.state.msg || {};
			},
			markers() {
				return this.$store.state.msg.markers;
			},
			users() {
				if (!this.storeData || !this.storeData.user || this.markers.length === 0) {
					return [];
				}
		
				return (this.markers || []).filter((item) => item.id !== this.storeData.user.userId && item.type === '普通用户');
			},
			visibleUsers() {
				const list = this.users.slice(0, this.maxVisible); // 截取前 maxVisible 个元素
				const map = new Map();
				const uniqueArr = list.filter((item) => {
					if (!map.has(item.id)) {
						// 如果 id 未被记录，标记为已存在并保留当前元素
						map.set(item.id, true);
						return true;
					} else {
						// 如果 id 已存在，过滤掉当前元素（不保留）
						return false;
					}
				});
				return uniqueArr;
			},
			// 是否应该显示数量
			shouldShowCount() {
				// 调试信息，帮助确认问题
				console.log('用户总数:', this.users.length);
				console.log('最大显示数:', this.maxVisible);
		
				// 如果设置了alwaysShowCount，或者用户数超过最大显示数，则显示
				return this.alwaysShowCount || this.users.length > this.maxVisible;
			},
			// 数量文本内容
			countText() {
				if (this.users.length > this.maxVisible) {
					return `+${this.users.length - this.maxVisible}`;
				} else {
					return `${this.users.length}`;
				}
			}
		},
		watch:{
			visibleUsers:{
				handler(newval){
					
				}
			}
		},
		methods:{
			membersInfo() {
				const format = encodeURIComponent(JSON.stringify(this.markers));
			
				uni.navigateTo({
					url: `/pages/membersInfo/membersInfo?key=普通用户`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
 .main{
	 position: fixed;
	 z-index: 9999;
	 height: 60rpx;
	 border-radius: 30rpx;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
 }
 .pic{
	  
 }
</style>